<template>
	<view class="pageV">
		<u-navbar title="拼团福利" placeholder @leftClick="onBackClick" leftIconColor="#E6A5B4" bgColor="#FFFFFF"
			:titleStyle="titleStyle">
		</u-navbar>
		<view class="cenV">
			<image style="width: 100%;" :src="detailsData.image" mode="widthFix"></image>
			<u-swiper :list="detailsData.images" :autoplay="true" indicatorStyle="right: 20px" height="421rpx"
				radius="0" circular>
			</u-swiper>
			<view class="yinV" v-if="comboInfo">
				<image v-if="isYIn" @click="onYinClick(false)" class="yinIv" src="../static/yin.png"></image>
				<image v-if="!isYIn" @click="onYinClick(true)" class="yinIv2" src="../static/yin.png"></image>
			</view>
			<view class="timeV">
				<view v-if="detailsData.surplus_time!=0" class="timeTitleTv">距离活动开始时间</view>
				<view v-if="detailsData.surplus_time!=0" class="timeVVVV">
					<view class="timeTv1">{{mTimeData.d}}</view>
					<view class="timeTv2">天</view>
					<view class="timeTv1">{{mTimeData.h}}</view>
					<view class="timeTv2">:</view>
					<view class="timeTv1">{{mTimeData.i}}</view>
					<view class="timeTv2">:</view>
					<view class="timeTv1">{{mTimeData.s}}</view>
				</view>
				<view v-if="detailsData.surplus_time==0" class="timeTitleTv">活动已结束</view>
			</view>
			<view class="orderV">
				<view class="orderTitleV">
					<view class="view1">
						订单上限
						<text v-if="detailsData.people_num!=0"> {{detailsData.people_num}} </text>
						<text v-if="detailsData.people_num==0"> 不限 </text>
						单
					</view>
					<view class="view2">当前订单 <text> {{detailsData.order_count}} </text> 单</view>
				</view>
				<view class="orderCenV">
					<view class="canyuV">
						<image class="canyuIv" src="../static/canyu.svg"></image>
						<view class="canyuVV">
							<view class="canyuTv1">{{detailsData.registered}}</view>
							<view class="canyuTv2">参与人数</view>
						</view>
					</view>

					<view class="canyuV">
						<image class="canyuIv" src="../static/zuji.svg"></image>
						<view class="canyuVV">
							<view class="canyuTv1">{{detailsData.views}}</view>
							<view class="canyuTv2">浏览</view>
						</view>
					</view>

					<view class="canyuV">
						<image class="canyuIv" src="../static/share.svg"></image>
						<view class="canyuVV">
							<view class="canyuTv1">{{detailsData.fenxiang_count}}</view>
							<view class="canyuTv2">分享</view>
						</view>
					</view>
				</view>
			</view>
			<view class="imageV">
				<u-grid col="5">
					<u-grid-item v-for="(item,key) in detailsData.user_list" :key="key">
						<view class="itemV">
							<image class="itemIv" :src="item.avatar" mode="aspectFill"></image>
							<view class="itemTv">{{item.nickname}}</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="detailsV">
				<view class="detailsTitleTv">活动详情</view>
				<view style="color: #fff; margin-top: 30rpx; margin-right: 30rpx; margin-left: 30rpx;">
					<rich-text :nodes="detailsData.content"></rich-text>
				</view>

				<view class="bottomV">
					<!-- open-type="share" -->
					<button v-if="detailsData" class="shareTv" @click="onShareClick">立即分享</button>
					<view
						v-if="(detailsData.people_num!=0&&detailsData.registered>=detailsData.people_num)||detailsData.surplus_time==0"
						class="addTv">立即参与</view>
					<view v-else class="addTv2" @click="onAddClick()">立即参与</view>
				</view>
			</view>
		</view>

		<!-- 下单 -->
		<uni-popup ref="popup" type="bottom" background-color="#1F1F1F">
			<view class="popupBg">
				<view class="titleV">
					<image class="iv" src=""></image>
					<view class="pupTitleTv"></view>
					<image @tap="onClseClick" class="iv" src="../../static/public/colse.svg"></image>
				</view>

				<view class="kechehgV">
					<image class="kechehgIv" :src="comboInfo.image"></image>
					<view class="kechehgTv1">
						<view class="kechehgTv2">{{comboInfo.title}}</view>
						<view class="kechehgTv3">¥{{comboInfo.price}}</view>
					</view>
				</view>


				<view class="infoV">课程</view>

				<scroll-view class="srvV" scroll-x="true">
					<view class="srvItemV" v-for="(item,key) in comboList" :key="key">
						<view @click="onItemKCClick(item,key)" :class="comboPos==key?'kcItem2':'kcItem'">
							<image class="kcItemIv" :src="item.image"></image>
							<view class="kcItemTv">
								{{item.title}}
							</view>
						</view>
					</view>
				</scroll-view>


				<view class="infoV">个人信息</view>
				<view class="identityV">
					<view class="identityItemV" @click="identity=1">
						<image class="identityIv" :src="identity==1?'../static/select_.svg':'../static/select.svg'">
						</image>
						新生
					</view>
					<view style="margin-left: 20rpx;" class="identityItemV" @click="identity=2">
						<image class="identityIv" :src="identity==2?'../static/select_.svg':'../static/select.svg'">
						</image>
						老生
					</view>
				</view>
				<view class="centerV">
					<view class="nameV">
						<image class="nameIv" src="../static/name.svg"></image>
						<u--input class="nameTv" color="#fff" placeholderStyle="color:#8d8d8d" fontSize="32rpx"
							placeholder="请输入您的姓名" border="none" v-model="mName"></u--input>
					</view>
					<view class="centerLineV"></view>
					<view class="phoneV">
						<image class="phoneIv" src="../static/phone.svg"></image>
						<u--input class="phoneTv" color="#fff" placeholderStyle="color:#8d8d8d" fontSize="32rpx"
							placeholder="请输入您的手机号" type="number" border="none" v-model="mPhone"></u--input>
					</view>
				</view>
				<view style="flex: 1;"></view>
				<view class="xuzhiV">
					<image @click="xieyi=!xieyi" class="xuzhiIv"
						:src="xieyi?'../static/select_.svg':'../static/select.svg'"></image>
					<view class="xuzhiTv1">我已阅读并同意</view>
					<view class="xuzhiTv2" @click="onAgreementClick">《购买协议》</view>
				</view>

				<view class="pupBottomV">
					<view class="payV">
						<view class="payTv1">待支付</view>
						<view class="payTv2"> ¥{{comboInfo.price}}</view>
					</view>
					<view class="addV" @click="onPayClick()">立即购买</view>
				</view>
			</view>
		</uni-popup>

		<!-- 海报 -->
		<uni-popup ref="imgPopup" type="center" background-color="#00000000">
			<view class="imgPupV">
				<image :src="imgURL" class="imgPupIv" @longpress="savePoster(imgURL)"></image>
				<text class="imgPupTv">长按上方图片保存并分享</text>
			</view>
		</uni-popup>

		<!-- 保存相册 -->
		<uni-popup ref="albumPopup" type="bottom" background-color="#00000000">
			<view class="albumPupV">
				<text class="albumPupTv1" @click="onAlbumClick">相册</text>
				<text class="albumPupTv2" @click="onAlbumColseClick">取消</text>
			</view>
		</uni-popup>

		<!-- 参与拼团 -->
		<uni-popup ref="groupPopup" type="center" background-color="#00000000">
			<view class="groupPupV">
				<view class="centgroupPupV">
					<text class="groupPupTv1">是否参与拼团</text>
					<view class="groupPupTv1To">参与人</view>
					<view class="groupPupVV">
						<image v-for="(teamData,teamIndex) in teamList" :key="teamIndex" class="groupPupiV"
							:src="teamData.avatar">{{teamData}}</image>
					</view>
					<view class="groupPupBottomV">
						<text class="groupPupTv2" @click="onGroupPopup(1)">参与拼团</text>
						<text class="groupPupTv3" @click="onGroupPopup(2)">立即开团</text>
					</view>
				</view>
				<u-icon @click="onGroupPopup(3)" name="close-circle" color="#fff" size="25"></u-icon>
			</view>
		</uni-popup>


		<ns-login ref="login" @saveUserInfo="onUserInfoClick"></ns-login>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				id: '',
				detailsData: {},
				xieyi: false,
				mName: '',
				mPhone: '',
				userId: '',
				mTime: 0,
				mTimeData: {},
				mMer: null,
				innerAudioContext: null,
				comboInfo: null,
				comboPos: 0,
				comboList: [],
				isYIn: false,
				imgURL: '',
				teamList: [], //拼团成员
				isTeam: -1, //1参与拼团 2立即开团
				identity: -1, //1新生  2老生
			}
		},
		onLoad(e) {
			if (e.scene) {
				var scene = decodeURIComponent(e.scene)
				var opnData = scene.split("&");
				var idd = opnData[0].split("=")[1];
				var uidd = opnData[1].split("=")[1];
				console.log("接收参数--->" + idd + "====" + uidd);
				this.id = idd;
				this.userId = uidd;
			} else {
				this.id = e.id;
				this.userId = e.userid;
			}


			if (uni.getStorageSync("user_info")) {
				this.getProjectInfo();
				this.getBind();
			} else {
				this.$refs.login.open({
					show: false
				});
			}
			this.openAudio();
		},
		onHide() {

		},
		onShareAppMessage: function(res) {
			console.log("开始分享接收参数--->" + JSON.stringify(res))
			let shopId = this.id;
			let userId = uni.getStorageSync("user_info_id");
			return {
				title: this.detailsData.sharetitle,
				imageUrl: this.detailsData.shareimage,
				path: `/mine/me/SpellTogetherDetails?id=` + shopId + `&userid=` + userId, // 分享后打开的页面
				success: function(res) {
					console.log("转发成功")
				},
				fail: function(res) {
					console.log("转发失败")
				}
			}
		},
		onUnload() {
			if (this.mMer != null) {
				clearInterval(this.mMer);
				this.mMer = null;
			}
			if (this.innerAudioContext != null) {
				this.innerAudioContext.pause(); //停止播放 
			}
		},
		methods: {
			openAudio() {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.onPlay(() => { //播放监听事件
					console.log('开始播放');
				});
				this.innerAudioContext.onPause(() => { //暂停监听
					console.log('暂停');
				});
				this.innerAudioContext.onStop(() => { //停止监听
					console.log('开始停止了')
				});
				this.innerAudioContext.onEnded(() => { // 自然播放结束监听也需要更改isPause 开关状态
					console.log('音频自然播放结束事件');
				});
			},
			onYinClick(bos) {
				this.isYIn = bos;
				if (this.isYIn) {
					if (this.innerAudioContext != null) {
						this.innerAudioContext.play();
					}
				} else {
					if (this.innerAudioContext != null) {
						this.innerAudioContext.pause();
					}
				}
			},
			onBackClick() {
				let pages = getCurrentPages();
				if (pages[pages.length - 2]) {
					//如果有上一页，就返回上一页
					wx.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/app/Home'
					});
				}

			},
			onAgreementClick() {
				this.$u.route({
					url: '/mine/me/Agreement',
					params: {
						type: 4,
					}
				})
			},
			onUserInfoClick(e) {
				if (e.code == 200) {
					this.getProjectInfo();
					this.getBind();
				} else {

				}
			},
			getBind() { //绑定上下级
				if (this.userId == undefined || this.userId.length == 0) {
					return;
				}
				this.$api.getPinTuanBind({
					active_id: this.id,
					share_id: this.userId,
				}).then((res) => {

				}).catch((e) => {

				})
			},
			getProjectInfo() {
				this.$api.getProjectInfo({
					id: this.id
				}).then((res) => {
					this.teamList = res.team;
					this.teamList.push(...res.team);
					this.teamList.push(...res.team);
					this.teamList.push(...res.team);
					let videos = res.info.video;
					this.detailsData = res.info;
					if (videos.length > 0) {
						let vid = [videos];
						this.detailsData.images = vid
					}
					this.mTime = this.detailsData.surplus_time;
					if (this.innerAudioContext != null) {
						this.innerAudioContext.src = this.detailsData.mp3; // 配置音频播放路径
						// this.innerAudioContext.src = "https://www.wthoo.com/uploads/20230402/6d8d8f227e843c3d01a60fcf27367849.mp3"
						this.innerAudioContext.play(); // 播放
						this.innerAudioContext.loop = true; // 是否循环播放
						this.isYIn = true;
					}
					this.comboList = this.detailsData.combo_list;
					this.comboInfo = this.comboList[0];
					this.comboPos = 0;
					this.str();
				}).catch((e) => {
					uni.$u.toast("获取信息失败");
				})
			},
			str() {
				let that = this;
				this.mMer = setInterval(() => {
					//创建定时器
					if (that.mTime === 0) {
						clearInterval(that.mMer);
						that.mMer = null;
					} else {
						that.mTimeData = that.countDown(that.mTime);
						that.mTime--
					}
				}, 1000);
			},
			onAddClick() {
				if (this.teamList && this.teamList.length > 0) {
					this.$refs.groupPopup.open()
				} else {
					this.isTeam = 2;
					this.$refs.popup.open()
				}
			},
			onClseClick() {
				this.$refs.popup.close()
			},
			onItemKCClick(item, key) { //选择课程
				this.comboPos = key;
				this.comboInfo = this.comboList[key];
			},
			onGroupPopup(e) {
				this.$refs.groupPopup.close();
				if (e == 1) {
					this.isTeam = 1;
					this.$refs.popup.open();
				} else if (e == 2) {
					this.isTeam = 2;
					this.$refs.popup.open();
				}
			},
			onPayClick() {
				if (this.identity == -1) {
					uni.$u.toast("请选择身份");
					return
				}
				if (this.mName.length == 0) {
					uni.$u.toast("请输入姓名");
					return
				}
				if (this.mPhone.length == 0) {
					uni.$u.toast("请输入手机号");
					return
				}
				if (!this.xieyi) {
					uni.$u.toast("请先阅读并同意协议");
					return
				}
				this.$api.addProject({
					id: this.id,
					price: this.comboInfo.price,
					name: this.mName,
					mobile: this.mPhone,
					combo_id: this.comboInfo.id,
					user_type: this.identity == 1 ? 'new' : 'old',
					share_id: this.userId ? this.userId : 0,
					team_id: this.isTeam == 1 ? this.userId ? this.userId : 0 :uni.getStorageSync("user_info_id")
				}).then((res) => {
					this.pay(res.order_id);
					// uni.$u.toast("参与成功");
					// this.$refs.popup.close()
				}).catch((e) => {
					uni.$u.toast("参与失败");
				})
			},
			pay(orderid) {
				this.$api.pinTuanPay({
					order_id: orderid,
				}).then((res) => {
					this.payOrder(res);
				}).catch((e) => {
					uni.$u.toast("参与失败");
				})
			},
			payOrder(payData) {
				console.log('-----', payData)
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp,
					nonceStr: payData.nonceStr,
					package: payData.package,
					signType: payData.signType,
					paySign: payData.paySign,
					success: function(res) {
						uni.$u.toast("参与成功");
						this.$refs.popup.close()
					},
					fail: function(err) {
						uni.$u.toast("支付失败");
					}
				})
			},
			countDown(seconds) {
				let [day, hour, minute, second] = [0, 0, 0, 0]
				if (seconds > 0) {
					day = Math.floor(seconds / (60 * 60 * 24))
					hour = Math.floor(seconds / (60 * 60)) - (day * 24)
					minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
					second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
				}
				if (day < 10) {
					day = '0' + day
				}
				if (hour < 10) {
					hour = '0' + hour
				}
				if (minute < 10) {
					minute = '0' + minute
				}
				if (second < 10) {
					second = '0' + second
				}
				return {
					d: day,
					h: hour,
					i: minute,
					s: second
				};
			},
			onShareClick() {
				uni.showLoading({
					title: "加载中..."
				})
				this.$api.getQrcode({
					id: this.id,
				}).then((res) => {
					uni.hideLoading();
					this.imgURL = res;
					this.$refs.imgPopup.open();
				}).catch((e) => {
					uni.hideLoading();
				})
			},
			onAlbumClick(url) {
				this.$refs.albumPopup.close();
				uni.getSetting({ //获取用户的当前设置
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum();
						} else {
							uni.authorize({ //如果没有授权，向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum();
								},
								fail: () => {
									uni.showToast({
										title: "请打开保存相册权限，再点击保存相册分享",
										icon: "none",
										duration: 3000
									});
									setTimeout(() => {
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: (res2) => {
												// console.log(res2.authSetting)
											}
										});
									}, 3000);
								}
							})
						}
					}
				})
			},
			onAlbumColseClick() {
				this.$refs.albumPopup.close();
			},
			savePoster(url) {
				this.$refs.albumPopup.open();
			},
			saveImageToPhotosAlbum() {
				uni.downloadFile({
					url: this.imgURL,
					success: (res) => {
						if (res.statusCode === 200) {
							let tempFilePath = res.tempFilePath;
							uni.saveImageToPhotosAlbum({
								filePath: tempFilePath,
								success: function() {
									uni.showToast({
										title: '保存成功'
									});
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.pageV {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	.cenV {
		flex: 1;
		position: relative;
	}

	.yinV {
		position: absolute;
		right: 30rpx;
		top: 30rpx;

		.yinIv {
			width: 60rpx;
			height: 60rpx;
			animation: box-ani 10s infinite linear;
		}

		@keyframes box-ani {
			from {
				transform: rotate(0)
			}

			to {
				transform: rotate(360deg)
			}
		}

		.yinIv2 {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.topIv {
		width: 100%;
		height: 421rpx;

	}

	.timeV {
		width: 100%;
		height: 230rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #383838;

		.timeTitleTv {
			font-size: 36rpx;
			color: #E6A5B4;
		}

		.timeVVVV {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;

			.timeTv1 {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #E6A5B4;
				border-radius: 10rpx;
				font-size: 46rpx;
				color: #383838;
			}

			.timeTv2 {
				font-size: 32rpx;
				color: #E6A5B4;
				padding-left: 20rpx;
				padding-right: 20rpx;
			}
		}



	}

	.orderV {
		margin-top: 15rpx;
		background-color: #383838;
		padding-bottom: 20rpx;

		.orderTitleV {
			display: flex;
			justify-content: space-between;
			padding-top: 15rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;

			.view1 {
				font-size: 28rpx;
				color: #F9F9F9;
				display: flex;
				align-items: baseline;

				text {
					font-size: 36rpx;
					color: #F9F9F9;
				}
			}

			.view2 {
				font-size: 28rpx;
				color: #F9F9F9;
				display: flex;
				align-items: baseline;

				text {
					font-size: 36rpx;
					color: #E6A5B4;
				}
			}
		}

		.orderCenV {
			display: flex;
			margin-top: 20rpx;

			.canyuV {
				display: flex;
				justify-content: center;
				flex: 1;

				.canyuIv {
					width: 70rpx;
					height: 70rpx;
				}

				.canyuVV {
					margin-left: 10rpx;
					display: flex;
					flex-direction: column;

					.canyuTv1 {
						font-size: 32rpx;
						color: #F9F9F9;
					}

					.canyuTv2 {
						font-size: 22rpx;
						color: #E8E8E8;
					}
				}
			}
		}
	}

	.imageV {
		margin-top: 20rpx;
		padding-bottom: 15rpx;
		background: #383838;
		align-items: center;
		justify-content: center;

		.itemV {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20rpx;

			.itemIv {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: antiquewhite;
			}

			.itemTv {
				margin-top: 10rpx;
				color: #F9F9F9;
				font-size: 24rpx;
			}
		}
	}

	.detailsV {
		margin-top: 15rpx;
		background: #383838;

		.detailsTitleTv {
			font-size: 34rpx;
			color: #F9F9F9;
			margin-left: 30rpx;
			padding-top: 30rpx;
		}

		.bottomV {
			display: flex;
			padding: 30rpx;

			.shareTv {
				flex: 1;
				height: 100rpx;
				background: #1F1F1F;
				border-radius: 10rpx 0rpx 0rpx 10rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.addTv {
				flex: 1;
				height: 100rpx;
				background: #4a4a4a;
				border-radius: 0rpx 10rpx 10rpx 0rpx;
				font-size: 32rpx;
				color: #959595;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.addTv2 {
				flex: 1;
				height: 100rpx;
				background: #CEF743;
				border-radius: 0rpx 10rpx 10rpx 0rpx;
				font-size: 32rpx;
				color: #333737;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.popupBg {
		height: 1048rpx;

		.titleV {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;

			.pupTitleTv {
				font-size: 32rpx;
				color: #E8E8E8;
			}

			.iv {
				width: 42rpx;
				height: 42rpx;
			}
		}

		.kechehgV {
			display: flex;
			margin-left: 30rpx;

			.kechehgIv {
				width: 130rpx;
				height: 130rpx;
				border-radius: 10rpx;
			}

			.kechehgTv1 {
				margin-left: 10rpx;
				display: flex;
				flex-direction: column;
			}

			.kechehgTv2 {
				font-size: 30rpx;
				color: #fff;
			}

			.kechehgTv3 {
				margin-top: 5rpx;
				font-size: 30rpx;
				color: #E6A5B4;
			}
		}

		.infoV {
			font-size: 32rpx;
			color: #F9F9F9;
			margin-left: 30rpx;
			margin-top: 20rpx;
		}

		.identityV {
			margin-left: 30rpx;
			padding-top: 20rpx;
			display: flex;
			align-items: center;

			.identityItemV {
				display: flex;
				align-items: center;
				color: #fff;
				font-size: 30rpx;

				.identityIv {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}

		.srvV {
			margin-left: 30rpx;
			margin-top: 20rpx;
			white-space: nowrap;
			vertical-align: middle;
			overflow: hidden;

			.srvItemV {
				display: inline-block;
				margin-right: 30rpx;

				.kcItem {
					display: flex;
					flex-direction: column;
					border-radius: 10rpx;
					background-color: #383838;
					border: 1rpx solid #383838;

					.kcItemIv {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx 10rpx 0rpx 0rpx;
					}

					.kcItemTv {
						width: 200rpx;
						font-size: 30rpx;
						color: #fff;
						padding-top: 10rpx;
						display: -webkit-box;
						overflow: hidden;
						text-align: center;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						white-space: normal;
						word-wrap: break-word;
					}
				}

				.kcItem2 {
					display: flex;
					flex-direction: column;
					border-radius: 10rpx;
					background: rgba(206, 247, 67, 0.2);
					border: 1rpx solid #CEF743;

					.kcItemIv {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx 10rpx 0rpx 0rpx;
					}

					.kcItemTv {
						width: 200rpx;
						font-size: 30rpx;
						color: #CEF743;
						padding-top: 10rpx;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						text-align: center;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						white-space: normal;
						word-wrap: break-word;
					}
				}
			}
		}

		.centerV {
			background: #383838;
			border-radius: 10rpx;
			margin-top: 20rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;

			.nameV {
				display: flex;
				align-items: center;
				height: 105rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;

				.nameIv {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				.nameTv {
					margin-left: 10rpx;
				}
			}

			.centerLineV {
				height: 1rpx;
				background: #6B6B6B;
				margin-left: 30rpx;
				margin-right: 30rpx;
			}

			.phoneV {
				display: flex;
				align-items: center;
				height: 105rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;

				.phoneIv {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				.phoneTv {
					margin-left: 10rpx;
				}
			}
		}

		.xuzhiV {
			display: flex;
			margin-top: 25rpx;

			.xuzhiIv {
				width: 30rpx;
				height: 30rpx;
				margin-left: 30rpx;
			}

			.xuzhiTv1 {
				margin-left: 30rpx;
				font-size: 28rpx;
				color: #8D8D8D;
			}

			.xuzhiTv2 {
				font-size: 28rpx;
				color: #8D8D8D;
				text-decoration: underline;
			}
		}

		.pupBottomV {
			display: flex;
			margin-top: 20rpx;

			.payV {
				flex: 1;
				height: 98rpx;
				background: rgba(206, 247, 67, 0.2);
				display: flex;
				align-items: center;
				justify-content: center;

				.payTv1 {
					font-size: 32rpx;
					color: #CEF743;
				}

				.payTv2 {
					font-size: 32rpx;
					color: #CEF743;
					margin-left: 10rpx;
				}
			}

			.addV {
				flex: 1;
				height: 98rpx;
				font-size: 32rpx;
				color: #333737;
				background: #CEF743;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

	}

	.imgPupV {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
	}

	.imgPupIv {
		width: 75%;
		height: 70vh;
	}

	.imgPupTv {
		color: #fff;
		font-size: 30rpx;
		margin-top: 10rpx;
	}

	.albumPupV {
		background-color: #fff;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		display: flex;
		flex-direction: column;
	}

	.albumPupTv1 {
		font-size: 30rpx;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 0.1rpx solid #eeeeee;
	}

	.albumPupTv2 {
		font-size: 30rpx;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.groupPupV {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.centgroupPupV {
			width: 60vw;
			background: #333333;
			border-radius: 15px;
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin-bottom: 20rpx;

			.groupPupTv1 {
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #E8E8E8;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.groupPupTv1To {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #8D8D8D;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.groupPupVV {
				max-width: 60vw;
				display: flex;
				align-items: center;
				justify-content: space-between;
				overflow-x: scroll;
				padding-top: 30rpx;
				padding-bottom: 30rpx;

				.groupPupiV {
					min-width: 80rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}

			.groupPupBottomV {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.groupPupTv2 {
				width: 45%;
				height: 70rpx;
				border-radius: 35rpx;
				border: 1rpx solid #999999;
				color: #999999;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.groupPupTv3 {
				width: 45%;
				height: 70rpx;
				border-radius: 35rpx;
				border: 1rpx solid #D5FF45;
				color: #D5FF45;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>